<template>
    <div>
        <el-card style="border:none !important;border-radius: 12px;box-shadow:none !important">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/userhome' }">个人中心</el-breadcrumb-item>
                <el-breadcrumb-item>
                    <a href="/user_balance">账户管理</a>
                </el-breadcrumb-item>
                <el-breadcrumb-item>账户余额</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="tab-nav-bd">
                <span class="title">账户余额</span>
            </div>
        </el-card>
        <ul class="currency-list" style="margin-top: 20px;">
            <li class="currency-item">
                <div class="currency-title">
                    下载币余额
                </div>
                <div class="currency-nums"><span>{{userInfo.money || 0}}</span></div>
                <svg class="icon" aria-hidden="true"
                    style="position: absolute;
    right: -12px;
    top: -12px;
    z-index: -1;
    font-size: 87px;
    color: #FFE5CA;">
                    <use xlink:href="#icon-youzhimaoyiqu"></use>
                </svg>
            </li>
        </ul>
        <div>
            <el-card style="border:none !important;border-radius: 12px;box-shadow:none !important">
                <el-table :data="balanceList" style="width: 100%">
                    <el-table-column prop="create_time" label="时间" align="center" />
                    <el-table-column  label="收入/支出" align="center">
                        <template #default="scope">
                          <div v-if="scope.row.type == 'takein'">+{{ scope.row.money }}元</div>
                          <div v-if="scope.row.type == 'expend'">-{{ scope.row.money }}元</div>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column prop="before" label="之前余额" /> -->
                    <!-- <el-table-column prop="money" label="余额" /> -->
                    <el-table-column prop="after" label="余额" align="center" />
                    <el-table-column prop="memo" label="描述" show-overflow-tooltip align="center" />
                </el-table>
                <div style="margin-top: 20px;display: flex;align-items: center;justify-content: center; width: 100%;"><el-pagination
                        background v-model:current-page="currentPage" v-model:page-size="pageSize"
                        layout="prev, pager, next" :total="total" @current-change="handleCurrentChange"
                        :hide-on-single-page="true" /></div>
            </el-card>
        </div>
    </div>
</template>
<script lang="ts" setup>

import { ref, onMounted,nextTick } from 'vue';
import { balance } from '../../api/user/index'
import router from '../../router'
import { useUserInfo } from '../../stores/userInfo'
const userInfo = useUserInfo() //获取用户信息
const currentPage = ref(1); //当前页
const pageSize = ref(10) //每页显示条目个数
const total = ref(0)
//数据源
const balanceList =ref<any>([]);
const balanceInfo = () =>{
    balance({ limit: pageSize.value, page: currentPage.value }).then((res:any)=>{
        if(res.code == 1){
            balanceList.value = res.data.list
            total.value = res.data.total
        }
    }).catch((error:any)=>{
        if(error.code == 0){
            console.log("余额获取失败")
        }
    })
}
//选择页数
const handleCurrentChange = (val: number) => {
    currentPage.value = val
    balanceInfo()
}

onMounted(()=>{
    balanceInfo()
})




</script>
<style scoped>
.tab-nav-bd {
    margin-top: 16px;
}

.tab-nav-bd .title {
    font-size: 18px;
    font-weight: 700;
    color: #1D2129;
    line-height: 26px;
}

.currency-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 16px;
    margin-left: -16px;
}

.currency-list>li {
    position: relative;
    margin-left: 16px;
    padding: 22px 24px 0;
    /* width: 321px;
    height: 148px; */
    width: 230px;
    height: 100px;
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(205, 102, 6, 0)), to(rgba(248, 193, 98, .3))) #FFF;
    background: linear-gradient(360deg, rgba(205, 102, 6, 0) 0, rgba(248, 193, 98, .3) 100%) #FFF;
    border-radius: 12px;
    overflow: hidden;
    z-index: 1;
}

.currency-list>li .currency-title {
    position: relative;
    font-size: 18px;
    color: #1D2129;
    line-height: 22px;
    text-align: left;
    z-index: 0;
}

.currency-list>li .currency-title::after {
    content: "";
    position: absolute;
    top: 13px;
    left: 0;
    width: 84px;
    height: 12px;
    background: -webkit-gradient(linear, left top, right top, from(rgba(255, 159, 112, .3)), to(rgba(254, 182, 146, .1)));
    background: linear-gradient(90deg, rgba(255, 159, 112, .3) 0, rgba(254, 182, 146, .1) 100%);
    border-radius: 12px;
    z-index: -1;
}

.currency-list>li .currency-nums {
    margin: 6px 0;
    font-size: 32px;
    font-weight: 700;
    color: #1D2129;
    line-height: 36px;
}
</style>